<p>comment-add works!</p>
<div>更新表单数据有两种方式：
  <li> 使用 setValue() 方法来为单个控件设置新值。 setValue() 方法会严格遵循表单组的结构，并整体性替换控件的值。</li>
  <li> 使用 setValue() 方法来为单个控件设置新值。 setValue() 方法会严格遵循表单组的结构，并整体性替换控件的值。</li>
  <li>pristine: boolean 如果用户尚未修改 UI 中的值，则该控件是 pristine（原始状态）的。</li>
  <li>touched: boolean 一旦用户在控件上触发了 blur 事件，则会将其标记为 touched。</li>
  <li> untouched: boolean 如果用户尚未在控件上触发过 blur 事件，则该控件为 untouched。</li>
  <li> 上面的dirty 是 AbstractControl 类的属性，用于判定控件是否修改过控件的值。 </li>
  <li>  </li>
</div>
<div>
  <label> Name: <input type="text" [formControl]="name"></label>

  <form [formGroup]="userInfo" (ngSubmit)="onSubmit()">
    <label> First Name: <input type="text" formControlName="firstName" class="form-control form-control-sm"></label>
    <div class="alert alert-danger" *ngIf="firstName!.dirty">
      valid: {{firstName!.valid | json}} <br>
      errors: {{firstName!.errors | json}}
    </div>
    <label> Last Name: <input type="text" formControlName="lastName" class="form-control form-control-sm"> </label>
    <div *ngIf="lastName!.dirty && lastName!.errors" class="alert alert-danger">
      <span>请填写last name</span>
    </div>
    <label> age: <input type="text" formControlName="age" class="form-control form-control-sm"> </label>
    <div *ngIf="age!.dirty && age!.errors" class="alert alert-danger">
      <span>请输入正确的年龄</span>
    </div>


    <div formGroupName="address">
      <label> street: <input type="text" formControlName="street" class="form-control form-control-sm"></label>
      <label> city: <input type="text" formControlName="city" class="form-control form-control-sm"></label>
    </div>
    <div class="form-group">
      <label formArrayName="sizes" *ngFor="let size of sizes.controls; let i = index">
        Size: <input type="text" [formControlName]="i" class="form-control form-control-sm">
      </label>
    </div>
    <button class="btn btn-primary btn-sm" type="submit">提交</button>
  </form>
</div>
<div>
  <label> 操作数据</label>
  <button class="btn btn-primary btn-sm" (click)="onPatchValue()">onPatchValue</button>
  <button class="btn btn-danger btn-sm" (click)="onSetValue()">onSetValue</button>
  <button class="btn btn-dark btn-sm" (click)="addSize()">addSize</button>
  <button class="btn btn-success btn-sm" (click)="deleteSize()">deleteSize</button>
  <div>
    <label> 显示</label>
    <p>value: {{name.value}}</p>
    <p>userInfo : {{userInfo.value|json}}</p>
  </div>
</div>
<div>
  <form #profileForm="ngForm" (ngSubmit)="onSubmit3(profileForm)">
    <div class="form-group">
      <label> First Name: <input type="text" [(ngModel)]="person.firstName" name="firstName"
                                 class="form-control form-control-sm"> </label>
      <label> Last Name: <input type="text" [(ngModel)]="person.lastName" name="lastName"
                                class="form-control form-control-sm"></label>
      <label> street: <input type="text" [(ngModel)]="person.street" name="street" class="form-control form-control-sm"></label>
      <label> city: <input type="text" [(ngModel)]="person.city" name="city"
                           class="form-control form-control-sm"></label>
    </div>
    <button class="btn btn-primary btn-sm" type="submit">提交</button>

  </form>
</div>
<div>
  <label> 操作数据</label>
  <div class="btn-group">
    <button class="btn btn-primary btn-sm" (click)="onSubmit2()">提交</button>
  </div>
  <div>
    <label> 显示</label>
    <p>value: {{person|json}}</p>
  </div>
</div>
<hr/>




